<template>
	<view class="page-container">
		<view class="collect-container">
			<view class="collect-main">
				<text>↗</text>
				<text>点击右上角···收藏转发</text>
				<text>防止页面丢失</text>
			</view>
		</view>
		<view class="top-navigation-wrapper">
			<view class="navigation-item" @click="isQrCodeShow = true">
				<image src="/static/imgs/collect-nav.png" style="width: 30px; height: 30px"></image>
				<text>关注公众号</text>
				<text>每日领取/售后</text>
			</view>
			<view class="navigation-item" @click="handleNavigation('/pages/index/help')">
				<image src="/static/imgs/help-nav.png" style="width: 30px; height: 30px"></image>
				<text>如何使用</text>
				<text>使用场景/方式</text>
			</view>
			<view class="navigation-item order-column-style" @click="handleNavigation('/pages/order/index')">
				<image src="/static/imgs/order-nav.png" style="width: 30px; height: 30px"></image>
				<text>我的订单</text>
				<text>订单详情售后</text>
			</view>
		</view>
		<view class="notice-wrapper">
			<image src="/static/imgs/wechat-pay.png" style="width: 30px; height: 30px"></image>
			<text>每天领支付立减券 最高减</text>
			<text class="highlight">30</text>
			<text>元</text>
		</view>
		<view class="list-wrapper">
			<view class="tab-wrapper">
				<wd-tabs v-model="currentTab" custom-class="tabs" autoLineWidth @change="handleTabsChange">
					<block v-for="item in tabsList" :key="item">
						<wd-tab :title="`${item.label}`" :name="item.value"></wd-tab>
					</block>
				</wd-tabs>
			</view>
			<view class="tag-wrapper">
				<wd-tag mark :plain="currentTag != index" v-for="(item, index) in tagsList" :key="index"
					custom-class="tag-class" @click="filterCoupon(index)">{{item}}</wd-tag>
			</view>
			<!-- 可领取优惠券列表 -->
			<view class="coupon-list" v-if="currentTab == 0">
				<view class="coupon-item" v-for="(item, index) in list" :key="index">
					<view class="h">
						<view class="left">
							<view class="amount-box">
								<text class="symbol">¥</text>
								<!-- <text class="amount">{{item.stock_use_rule.fixed_normal_coupon.coupon_amount/100}}</text> -->
								<text class="amount">5</text>
							</view>
							<text class="type">立减券</text>
						</view>
						<view class="right">
							<view class="bank-name">{{ item.stock_name }}</view>
							<!-- <view class="validity">有效期剩余{{ getDayDiff(item.available_end_time) }}天</view> -->
							<view class="validity">领取后3天有效</view>
							<view class="limit">每单限用1张</view>
							<view class="btn-receive" @click="getCoupon(item.stock_id,item.stock_name)">
								去领取
							</view>
						</view>
					</view>

					<view class="description-wrapper">
						<wd-collapse viewmore v-model="item.isCouponDescription" :line-num="1" use-more-slot>
							<view>
								{{ item.description}}
							</view>
							<template #more>
								<view>详情</view>
							</template>
						</wd-collapse>
					</view>
				</view>
			</view>
			<!-- 已领取优惠券列表 -->
			<view class="coupon-list" v-if="currentTab == 1">
				<view class="coupon-item" v-for="(item, index) in listRecords" :key="index">
					<view class="h">
						<view class="left">
							<view class="amount-box">
								<text class="symbol">¥</text>
								<text class="amount">{{
			               item.normal_coupon_information.coupon_amount / 100 || 0
			              }}</text>
							</view>
							<text class="type">立减券</text>
						</view>
						<view class="right">
							<view class="bank-name">{{item.coupon_name}}</view>
							<!-- <view class="validity">有效期剩余{{ getDayDiff(item.available_end_time) }}天</view> -->
							<view class="validity">领取后1天有效</view>
							<view class="limit">每单限用1张</view>
							<view class="btn-receive">
								可使用
							</view>
						</view>
					</view>

					<view class="description-wrapper">
						<wd-collapse viewmore v-model="item.isCouponDescription" :line-num="1" use-more-slot>
							<view>
								仅限领取微信用户使用
							</view>
							<template #more>
								<view>详情</view>
							</template>
						</wd-collapse>
					</view>
				</view>
			</view>
		</view>
		<wd-fab :draggable="true" position="right-top" :expandable="false" :gap="{top:100}">
			<template #trigger>
				<view class="customer-service-wrapper" @click="handleCallTel">
					<image src="/static/imgs/customer-service.png"></image>
					<view class="customer-service-text">客服</view>
				</view>
			</template>
		</wd-fab>
		<wd-popup v-model="isQrCodeShow">
			<image src="/static/imgs/followQrCode.png"></image>
		</wd-popup>
		<wd-popup v-model="isCouponListPopupShow" position="bottom" :safe-area-inset-bottom="true"
			custom-style="border-radius:32rpx 32rpx 0 0;" closable>
			<view class="popup-container">
				<view class="popup-title" style="margin-bottom: 4px">领取今日银行卡立减券</view>
				<view class="popup-desc" style="margin-bottom: 4px">可每日领取，选择常用卡</view>
				<scroll-view class="popup-coupon-list" scroll-y="true" style="height: 377px">
					<template v-for="(item, index) in list" :key="index">
						<view class="popup-coupon-item-wrapper" v-if="item.isGet == 1">
							<view class="popup-coupon-item" @click="selectPopupCoupon(item)">
								<view class="popup-coupon-item-logo">
									<image :src="`/static/imgs/bank-${index}.png`" style="width: 30px; height: 30px">
									</image>
								</view>
								<view>
									<view class="popup-coupon-name">{{ item.stock_name }}</view>
									<view class="popup-coupon-describe">使用{{ item.stock_name }}支付享优惠</view>
								</view>
								<view class="select-item" v-if="selectPopupCouponItem.stock_id == item.stock_id">
									<image src="/static/imgs/select-coupon.png"></image>
								</view>
							</view>
						</view>
					</template>
				</scroll-view>
				<view class="popup-footer">
					<view class="select-item-button" @click="selectPopupCouponSubmit()">确定</view>
				</view>
			</view>
		</wd-popup>
		<wd-toast />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		apiCouponList
	} from "@/api/coupon";
	import {
		apiGetCoupon
	} from "@/api/member";
	import {
		useToast
	} from "@/uni_modules/wot-design-uni";
	const toast = useToast();
	const list = ref([]);
	const listRecords = ref([]);
	const listCopy = ref([]);
	const listRecordsCopy = ref([]);
	//页面加载
	onLoad((ops) => {
		getCouponList();
		
		if(ops.msg){
			uni.showToast({
				title:'部分优惠券已发放至微信-我的-卡包-券和礼品卡，请注意查收',
				icon:'none',
				duration:3000
			})
		}
	})

	const tabsList = ref([{
			label: '可领券',
			value: 0
		},
		{
			label: '已领取',
			value: 1
		},
	]);
	//标签显示银行列表
	const tagBankList = ref({
		0: [
			"中国银行",
			"农业银行",
			"工商银行",
			"建设银行",
			"招商银行",
			"平安银行",
			"邮储银行",
			"兴业银行",
		],
		1: ["中国银行", "农业银行", "工商银行", "建设银行"],
		2: ["招商银行", "平安银行"],
		3: ["邮储银行"],
		4: ["兴业银行"],
	});
	const isCouponDescription = ref(false);
	const tagsList = ref(["全部", "充电/公交", "加油/停车", "话费充值", "购物消费"]);
	//当前Tab
	const currentTab = ref(0);
	//当前Tag
	const currentTag = ref(0);

	const isQrCodeShow = ref(false);
	//客服电话
	const handleCallTel = () => {
		uni.makePhoneCall({
			phoneNumber: "4008381086",
			success: (res) => {},
			fail: (res) => {},
			complete: (res) => {},
		});
	}
	const handleNavigation = (url) => {
		uni.navigateTo({
			url: url
		});
	}
	//tabsChange
	const handleTabsChange = ({
		index,
		name
	}) => {
		currentTab.value = name;
		getCouponList(currentTab.value);
	}
	//优惠券列表弹窗显示
	// const isCouponListPopupShow = ref(true);
	const isCouponListPopupShow = ref(false);
	const isGetAll = ref(false);
	//获取优惠券列表
	const getCouponList = async () => {

		const res = await apiCouponList({
			listType: currentTab.value
		});

		if (res.length > 0) {
			res.forEach((v) => {
				v.isCouponDescription = false;
				if (v.isGet == 1) {
					isGetAll.value = true;
				}
			});
		}
		// isCouponListPopupShow.value = isGetAll.value;

		if (currentTab.value == 1) {
			listRecords.value = res;
			listRecordsCopy.value = res;
		} else {
			list.value = res;
			listCopy.value = res;
		}
	}
	//标签筛选优惠券列表
	const filterCoupon = (tagIndex) => {
		currentTag.value = tagIndex;
		// if (currentTab.value == 1) {
		// 	const bankNames = tagBankList.value[tagIndex];
		// 	listRecords.value = listRecordsCopy.value.filter((item) =>
		// 		bankNames.some((bankName) => item.coupon_name.includes(bankName))
		// 	);
		// } else {
		// 	const bankNames = tagBankList.value[tagIndex];
		// 	list.value = listCopy.value.filter((item) =>
		// 		bankNames.some((bankName) => item.stock_name.includes(bankName))
		// 	);
		// }

	}
	//领取优惠券
	const getCoupon = async (stockId, stockName, isGet) => {
		if (isGet == 0) {
			return;
		}
		await apiGetCoupon({
			stock_id: stockId,
			stock_name: stockName
		});
		toast.success("领取成功");
		getCouponList();
	}
	//选中优惠券
	const selectPopupCouponItem = ref({});


	const selectPopupCoupon = async (item) => {
		selectPopupCouponItem.value = item;
	}
	const selectPopupCouponSubmit = async () => {
		if (
			typeof selectPopupCouponItem.value == "undefined" ||
			selectPopupCouponItem.value.length == 0
		) {
			toast.error("请选择优惠券");
			return;
		}
		await getCoupon(selectPopupCouponItem.value.stock_id, selectPopupCouponItem.value.stock_name,
			selectPopupCouponItem.value.isGet);
		isCouponListPopupShow.value = false;
	}
</script>

<style scoped>
	.page-container {
		padding: 0;
		min-height: 100vh;
		background: #f2f2f2 url(/static/imgs/index-top-bg.png) no-repeat;
		background-size: contain;
		padding-top: 5px;
	}

	.top-navigation-wrapper {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		margin: 10rpx 20rpx;
		border-radius: 10px;
		background: #fff;

		.navigation-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #666;
				line-height: 1.5;

				&:first-child {
					color: #333;
					font-weight: 500;
				}
			}
		}
	}

	.customer-service-wrapper {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	.customer-service-wrapper image {
		width: 123rpx;
		height: 100rpx;
	}

	.customer-service-text {
		color: #ff8803;
		border: 1rpx solid #ff8803;
		border-radius: 20rpx;
		background: #fff;
	}


	.notice-wrapper {
		height: 80rpx;
		background: #fef6de;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #376cc0;
		font-weight: bold;
		border-radius: 10px 10px 0 0;
		margin: 0px 10px 0;
		padding-right: 60px;

		.highlight {
			font-size: 36rpx;
			font-weight: bold;
			margin: 0 8rpx;
		}
	}

	.collect-container {
		display: flex;
		justify-content: flex-end;
		padding-bottom: 10px;
	}

	.collect-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-size: 10px;
	}

	.tag-class {
		font-size: 26rpx !important;
		margin: 10rpx;
	}

	.list-wrapper {
		background: #fff;
		border-radius: 10px 10px 0 0;
	}

	.tab-wrapper {
		padding: 20rpx 30rpx;
	}

	.tag-wrapper {
		padding: 0 10rpx;
	}

	.coupon-list {
		padding: 20rpx;
		background-color: #fff;

		.coupon-item {
			display: flex;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			position: relative;
			overflow: hidden;
			flex-direction: column;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);

			.h {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.description-wrapper {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				border-top: 1px dashed #eee;

				.wd-collapse {
					padding: 0;
					width: 100%;
				}

				.limit {
					color: #999;
					flex: 1;
				}

				.detail {
					color: #1989fa;
					flex: 0 0 80rpx;
				}
			}

			.left {
				width: 180rpx;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.amount-box {
					display: flex;
					align-items: baseline;

					.symbol {
						font-size: 32rpx;
						color: #f00;
					}


					.amount {
						font-size: 80rpx;
						font-weight: bold;
						color: #f00;
					}
				}

				.type {
					font-size: 24rpx;
					color: #f00;
					margin-top: 10rpx;
				}
			}

			.right {
				flex: 1;
				padding: 30rpx;
				position: relative;
				border-left: 2rpx dashed #eee;

				.bank-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
				}

				.validity {
					font-size: 24rpx;
					color: #666;
					margin-top: 10rpx;
				}

				.limit {
					font-size: 22rpx;
					color: #999;
					margin-top: 6rpx;
				}

				.btn-receive {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: #f00;
					color: #fff;
					font-size: 24rpx;
					border-radius: 25rpx;

					&.btn-disabled {
						background: #ccc;
					}
				}

				.detail {
					position: absolute;
					right: 30rpx;
					bottom: 20rpx;
					font-size: 22rpx;
					color: #1989fa;
				}
			}
		}
	}

	:deep(.wd-collapse>:first-child) {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	:deep(.wd-collapse .wd-collapse__more) {
		padding-left: 20rpx;
		margin-top: 0;
		word-break: keep-all;
	}

	.popup-container {
		padding: 30rpx;

		.popup-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 40rpx;
			text-align: center;

		}

		.popup-desc {
			padding-bottom: 20rpx;
			text-align: center;
			color: #211f1f;
			font-size: 26rpx;
		}

		.popup-coupon-item-wrapper {
			background-color: rgba(66, 137, 239, 0.2);
			border-radius: 20rpx;
			display: block;
			margin: 18rpx 0;
		}

		.popup-coupon-item {
			display: flex;
			align-items: center;
			padding: 28rpx 43rpx;
		}

		.popup-coupon-item-logo {
			margin-right: 43rpx;

			image {
				width: 68rpx !important;
				height: 68rpx !important;
			}
		}

		.popup-coupon-name {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #262626;
		}

		.popup-coupon-describe {
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #211f1f;
			padding-top: 21rpx;
		}

		.select-item {
			flex: 1;
			text-align: end;

			image {
				width: 46rpx;
				height: 46rpx;
			}
		}

		.popup-footer {
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
		}

		.select-item-button {
			width: 312rpx;
			height: 88rpx;
			background: linear-gradient(-6deg, #2379f5, #54b5ff);
			border-radius: 16rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
			line-height: 88rpx;
		}
	}
</style>